<template>
  <div id="nav">

    <router-link 
      v-for="(item, index) in routerList" 
      :key="index" 
      :to="item.path">
      {{item.name}}
      </router-link>
    
  </div>
  <router-view/>
</template>
<script lang=ts>
  import router from "./router"
  import {defineComponent} from 'vue'

  export default defineComponent({
    name: "App",
    setup(){
      const routerList = router.options.routes
      return {
        routerList
      }
    }

  })

</script>
<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
  a
    margin 0 10px 0 0
    &:after
      content '|'
      display inline-block
      margin 0 0 0 10px
    &:last-child:after
      content ''

</style>
